<template>
    <div class="bigbox">
        <!-- 导航栏 -->
        <div class="nav">
            <div  style="margin-left: 163px;">
                <ul v-if="userTel==null" class="navul">
                    <li @click="Gohompage">
                        <van-icon name="wap-home" color="#FF4400" />闲呗首页
                    </li>
                    <li><a class="mylogingo" @click="goLogin">登录</a>&nbsp;/&nbsp;<a @click="gozce">注册</a></li>
                    <li>退出</li>
                </ul>
                <ul v-else class="navul">
                    <li @click="Gohompage">
                        <van-icon name="wap-home" color="#FF4400" />闲呗首页
                    </li>
                    <li>欢迎你：{{this.userTel}}</li>
                    <li @click="tuichu">退出</li>
                </ul>
            </div>
            <div style="float: right;">
                <ul class="navultow">
                    <li @click="gomycenter" class="mycb1"><a class="myxb">我的闲呗</a>
                        <div class="hen"></div>
                        <ul class="second">
                            <li><a class="second1">我已买到的宝贝</a></li>
                            <li class="second1">我已卖出的宝贝</li>
                        </ul>
                    </li>
                    <!-- <li>
                        <van-icon name="shopping-cart-o" color="#FF4400" />购物车<div class="hen"></div>
                    </li> -->
                    <li>
                        <van-icon name="star" color="#FF4400" />收藏夹<div class="hen"></div>
                    </li>
                    <!-- <li>
                        手机版<div class="hen"></div>
                    </li> -->
                    <li @click="gocustomerchat()" >联系客服<div class="hen"></div>
                    </li>
                    <li>商家中心</li>

                </ul>
            </div>
        </div>
        <!-- 搜索区 -->
        <div class="headlogo">
            <div class="headinner">
                <div class="titlebox">
                    <div><img src="http://112.74.185.144:8000/files/Zqm1666747516.jpg" ></div>
                    <div class="miaosu huodongscent"><i class="el-icon-circle-check"></i>闲呗官方营销活动中心</div>
                    <!--  -->
                </div>
            </div>
        </div>
        <!-- 选项卡 -->
        <div class="tabbox">
            <el-tabs v-model="activeName" @tab-click="handleClick" width="1100px">
                <el-tab-pane label="所有活动" name="first">
                    <div class="duodongbox" v-for="(item,activityid) in activity" :key="activityid">
                        <div class="huodongxinagqingbox">
                            <div><img :src="item.activityIcon" alt=""></div>
                            <div class="hdneirbox">
                                <h3>{{item.activityName}}</h3>
                                <span>{{item.activityRule}}</span>
                                <div class="baomnumbox">
                                    <div v-if="item.leftTime > 0">
                                        <a>倒计时：{{item.leftTimeStr}}</a>
                                        <div>
                                        <a>已报名：</a>{{item.peoplenum}}
                                        <a>活动时间：</a>{{item.activityTime}} ~ {{item.endtime}}
                                        <el-button @click="myhuodong(item)" type="success" round>立即报名</el-button>
                                    </div>
                                    </div>
                                    <div v-else>
                                        <a>报名时间已截止</a>
                                        <div>
                                        <a>已报名：</a>{{item.peoplenum}}
                                        <a>活动时间：</a>{{item.activityTime}} ~ {{item.endtime}}
                                        <el-button disabled type="success" round>报名结束</el-button>
                                    </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <hr>
                    </div>
                </el-tab-pane>
                
            </el-tabs>
        </div>

        <!-- 抽屉 报名的页面 -->
        <el-drawer
            size="60%"
            title="活动报名:"
            :visible.sync="drawer"
            :direction="direction"
            :before-close="handleClose">
            <div class="baomingxuzhi">
                <span>
                    <div>
                        <div class="huodongguize">
                            <div>活动名称:
                               <span>{{this.baominglist.activityName}}</span> 
                            </div> 报名须知：
                            <a>{{this.baominglist.rule}}</a>
                            </div>
                            <!-- 报名弹出层 -->
                            <div class="xuanzshupp">
                                <h2>请选择想要参与活动的商品</h2>
                                <div>
                                    <el-input
                                        placeholder="请输入内容"
                                        v-model="input"
                                        clearable>
                                    </el-input>
                                    <el-button @click="activitysp">搜索</el-button>
                                </div>
                                <div class="huodongblack" v-for="(item,shoppid) in usershopplist" :key=shoppid>
                                    <div><img :src="item.commodityImg" alt=""></div>
                                    <div class="bmshopp">
                                        <div>{{item.commodityName}}</div>
                                        <div>￥<a>{{item.originalPrice}}</a></div>
                                        <div v-if="item.activityId==null">
                                            <el-button  @click="nowbaoming(item)" type="success" round>立即报名</el-button>
                                        </div>
                                        <div v-else>
                                            <el-button plain  disabled type="success" round>已报名</el-button>
                                        </div>
                                    </div> 
                                </div>
                            </div>
                    </div>
                     <!-- 分页组件 -->
                     <div class="feneybox">
                                <el-pagination
                                    @current-change="handleCurrentChange"
                                    :page-size="pagesize"
                                    background
                                    layout="prev, pager, next"
                                    :total="alltotal">
                                </el-pagination>
                            </div>
                </span>
            </div>
        </el-drawer>

    </div>
</template>
<script>
    export default {
    data() {
      return {
        userTel:sessionStorage.getItem('userTel'),
        input: '',
        pageNum:1,         //当前页
        alltotal:0,   //总条数
        pagesize:8,    //一页大小
        usershopplist:[],//用户的所有商品
        baominglist:[], //活动的详细信息
        activity:[],    //活动列表
        activeName: 'first',
        drawer: false,
        direction: 'rtl',
        
      };
    },
    methods: {
        Gohompage(){
                this.$router.push({name:'HomePage'})
            },
                  //到个人中心
                gomycenter(){
                    if(sessionStorage.getItem('userTel')==null){
                        this.$router.push({
                            name:'Login'
                        })
                    }else{
                        this.$router.push({
                            name:'MyCenter'
                        })
                    }
                },
            //退出登录的方法
         tuichu(){
            sessionStorage.removeItem('userTel')
            this.$router.go(0)
         },
            gozce(){
            this.$router.push({name:'Register'})
         },
                //前往登录
                goLogin(){
                this.$router.push({name:'Login'})
            },
            //回到首页.
            gohongpage(){
                this.$router.push({name:'HomePage'})
            },
            gocustomerchat(){  //去客服聊天
            if (sessionStorage.getItem('userTel')) {
                this.$router.push({name: 'CustomerChat'})
            }
         },
        handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.pageNum = val;  //当前页数
                this.selectshopp()
            },
        //进页面就查询所有活动的方法
        selecthuodong(){            
            this.$axios({
                url:'/api/activityTable/get',
                method:'get',
                params:{},
            })
            .then(resp=>{
                console.log(resp.data)
                this.activity = resp.data.data
                console.log("所有的活动",this.activity)
                this.getactivit()
            })
            .catch(err=>{
                console.log(err.data)
            })   
        },
        //搜索活动商品的方法
        activitysp(){
            this.pageNum=1
            this.$axios({
                url:'/api/allactivityselectshopp/get',
                method:'get',
                params:{
                    usertel:sessionStorage.getItem('userTel'),
                    name:this.input,
                    start:(this.pageNum-1)*this.pagesize,
                    size:this.pagesize,
                }
            })
            .then(resp=>{
                console.log(resp.data,199)
                this.usershopplist = resp.data.data
                this.alltotal = resp.data.num
            })
            .catch(err=>{
                console.log(err.data)
            })
        },
        //进页面就查询该用户所有的商品
        selectshopp(){ 
            this.$axios({
                url:'/api/commodityTableshopp/get',
                method:'get',
                params:{
                    start:(this.pageNum-1)*this.pagesize,
                    size:this.pagesize,
                    usertel:sessionStorage.getItem('userTel')
                },
            })
            .then(resp=>{
                console.log(resp.data)
                this.usershopplist = resp.data.data
                this.alltotal = resp.data.num
                console.log( this.alltotal,191);
                console.log("用户所有的商品",this.usershopplist)
                console.log(this.activity[0].publishtime,'活动的发布时间')
            })
            .catch(err=>{
                console.log(err.data)
            })   
        },
        //在拿到活动数据的活动发布时间转成的时间戳+活动报名的时长时间戳 - 获取到现在的时间戳进行时间倒计时显示
        //如果活动发布时间戳+报名时长时间戳>0时，就说明活动还能报名 否则活动到期，不能报名
        getactivit(){    
            this.activity.forEach(item=>{
                console.log(item.publishtime)
                // 时间戳的差值
                item.leftTime = new Date(item.publishtime).valueOf() + 10*24*60*60*1000 - new Date().valueOf();
                item.leftTimeStr = ''
            })
            console.log(this.activity,180)
            const timer = setInterval(()=>{
                this.activity.forEach(obj=>{
                    // 时间戳的差值
                    // console.log(obj.leftTime,182)
                    if(obj.leftTime >= 1000){
                        obj.leftTime -= 1000;
                        let day = parseInt(obj.leftTime/1000/60/60/24);
                        let hour = parseInt((obj.leftTime-day*24*60*60*1000)/1000/60/60);
                        let minute = parseInt((obj.leftTime-day*24*60*60*1000-hour*60*60*1000)/1000/60);
                        let miao = parseInt((obj.leftTime-day*24*60*60*1000-hour*60*60*1000-minute*60*1000)/1000)
                        if(day==0){
                            obj.leftTimeStr = hour + '小时' + minute + '分钟' + miao +'秒'
                        }
                        else if(hour==0){
                            obj.leftTimeStr = day + '天' + minute + '分钟' + miao +'秒'
                        }else if(minute==0){
                            obj.leftTimeStr = day + '天' + hour + '小时' + miao +'秒'
                        }else{
                            obj.leftTimeStr = day + '天' + hour + '小时' + minute + '分钟' + miao +'秒'
                        }
                    }
                })
                this.$forceUpdate();
            },1000);
            this.$once('hook:beforeDestroy', () => {                     
                clearInterval(timer);                                     
            })
        },

      handleClick(tab, event) {
        console.log(tab, event);
      },
      //遮罩层关闭的方法
      handleClose(done) {    
        this.$confirm('确认关闭？')
          .then(data => {
            console.log(data);
            done();
          })
          .catch(err=> {
            console.log(err);
          });
      },
      //点击报名活动弹出层，并且传参
      myhuodong(item){  
        this.drawer = true
        this.baominglist = item
        console.log(item)
        console.log('点击的活动块',this.baominglist)
        console.log('点击的活动id',this.baominglist.activityId)
        console.log('点击的活动的折扣',this.baominglist.discount)
      },
      //确认报名的方法
      nowbaoming(item){         
        this.$confirm('是否继续参加活动?', '提示',{
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            customClass:"messageIndex"
        })
        .then(()=>{    
            this.$message({
                type: 'success',
                message: '报名成功!'
            });
            this.quedingbm(item)
            item.activityId=1
        })
        .catch(()=>{
            this.$message({
                type: 'info',
                message: '已取消报名'
            });          
        })
        },
        //报名活动后修改商品状态的方法
        quedingbm(shopp){    
            this.$axios({
                url:'/api/commodityTableHuodongid/get',
                method:'get',
                params:{
                    hdongid:this.baominglist.activityId,    //活动的id
                    discount:this.baominglist.discount, //活动的折扣价格
                    spid:shopp.commodityId,             //商品id
                    originalPrice:shopp.originalPrice   //商品原价
                },
            })
            .then(resp=>{
                console.log(resp.data)
                console.log(shopp,215)
                console.log(shopp.commodityId,216)
            })
            .catch(err=>{
                console.log(err.data)
            })   
        }
    },
    mounted(){
        this.selecthuodong()//进页面就查询所有活动的方法
        this.selectshopp()//进页面就查询该用户所有的商品
    },
  };
</script>
<style scoped>
    .tabbox{
        width: 1170px;
        margin: 0 auto;
    }
    .duodongbox{
        width: 97%;
        border: 1px solid yellow ;
        margin: 0 auto;
    }
    .huodongxinagqingbox{
        display: flex;
        width: 1010px;
        justify-content: space-between;
    }
    .duodongbox img{
        width: 260px;
        height: 190px;
        border-radius: 3px;
    }
    .hdneirbox{
        width: 710px;
    }
    .hdneirbox span{
        color: rgb(153,153,153);
        font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
    }
    .baomnumbox{
        margin-top: 55px;
        color: #999;
        width: 100%;
        height: 41px;
    }
    .baomnumbox button{
        float: right;
    }
    .baomnumbox a{
        line-height: 39px;
        color:darkgray;
        font-weight: bold;
        margin-left: 10px;
    }
    .huodongscent{
        font-size: 23px;
    }
    .huodongguize{
        font-size: 22px;
        margin-left: 30px;
    }
    .huodongguize span{
        font-size: 26px;
        color: brown;
    }
    .huodongguize a{
        font-size: 16px;
        color: #999;
    }
    .xuanzshupp{
        /* height: 600px; */
        width: 600px;
        margin: 0 auto;
        /* border: 1px solid red; */
    }
    .huodongblack{
        border-bottom: 1px solid#999;
        display: flex;
        margin-top: 10px;
    }
    .huodongblack img{
        width: 86px;
        height: 86px;
    }
    .bmshopp{
        margin-left: 20px;
        width: 490px;
    }
    .bmshopp div:nth-child(1){
        color: #999;
        font-size: 22px;
    }
    .bmshopp div:nth-child(2){
        color: rgb(110, 190, 35);
        font-size: 22px;
    }
    .bmshopp div:nth-child(3){
        float: right;
    }
    .feneybox{
        margin-top: 30px;
        text-align: center;
        width: 520px;
        margin: 27px auto;
    }
    .el-input{
        width: 350px;
    }
    .seshu{
        width: 120px;
    }
</style>